<template>
  <div>	
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>任务文档</span>
        <el-upload
          class="upload"
          :action= uploadUrl
          multiple
          :data="{bizId: query.id, bizType: uploadType}"
          :headers="{
            token: token
          }"
          :limit="3"
          :show-file-list="true"
          :on-success="uploadSuccess"
          :on-error="uploadError"
        >
        </el-upload>
      </div>
      <div class="documentList" v-for="(item, index) in fileList" :key="index">
        <div>{{item.name}}</div>
        <div>
          <el-button type="success" size="mini">
             <a :href="item.url" :download="item.name" class="download">下载</a>
          </el-button>
        </div>
      </div>
    </el-card>
		<el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>审批流程</span>
      </div>
			<el-form ref="form" :model="form1">
        <el-form-item label="完成情况描述">
          <el-input v-model="form1.desc" type="textarea" style="width: 300px;display: block;"></el-input>
        </el-form-item>
      </el-form>
			<div v-for="(item, index) in approveNode" :key="index">
        <div class="documentList">
          <div class="approveNode">{{item.name}}</div>
          <el-button type="text" @click="select(item.name, index)" v-if="item.userList.length == 0" class="name">选择</el-button>
          <div v-else>
            <div v-for="(user, userIndex) in item.userList" :key="user.id" class="name" @click="reselect(index, user.name, userIndex, item.name, item.approveType)">{{user.name}}</div>
            <el-button type="text" @click="select(item.name, index)" v-if="item.approveType == 2 && item.userList.length != 0 && status == 'application'" class="name">选择</el-button>
          </div>
          <div v-if="status != 'application'" class="status">
            <span v-for="user in item.userList" :key="user.id">{{user.approveText}}<span v-if="user.approveOpinion && user.approveStatus == '4'">({{user.approveOpinion}})</span></span>
          </div>
        </div>
      </div>
    </el-card>
		<el-dialog title="选择审批人" :visible.sync="dialogVisible" width="600px">
      <UserSelect :roleId="roleId" :checkList="checkList" v-if="dialogVisible" @changeCheckList="changeCheckList" :isSingle="isSingle"></UserSelect>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="selectedRole">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="rejectVisible" >
      <el-input v-model="rejectText" placeholder="请填写驳回理由"></el-input>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="reject">确 定</el-button>
      </div>
    </el-dialog>
		<el-button type="primary" class="commit" @click="milestoneCommit" v-if="!control && status == 'application'">提交申请</el-button>
    <el-button type="primary" class="commit" @click="pass" v-if="control">通过</el-button>
    <el-button type="danger" class="commit" @click="rejectVisible = true" v-if="control">驳回</el-button>
  </div>
</template>
<script>
import {storage} from '@/utils';
import approveBase from '../base/approveBase';
export default {
	mixins: [approveBase],
  data() {
    return {
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1);
		},
		milestoneCommit() {
      let notifyContent = storage.get('loginInfo').userInfoVO.userName + "提交了《" + this.$route.query.name + "》里程碑任务完成审批";
		 	let selectApproveNode = this.approveNode.map(item => {
        if (item.userList.length === 0) {
          this.$alert("请选择审批人");
          return;
        }
        if (item.approveType == 1) {
          return {
            approveNodeId: item.id,
            userId: item.userList[0].id
          };
        } else {
          return {
            approveNodeId: item.id,
            userIdList: item.userList.map(user => {
              return user.id;
            })
          };
        }
      });
      let params = {
        modelId: $conf.modelId['milestoneTask'], //审批流编号
        bizId: this.query.id, //业务编号
        bizType: $conf.bizType['milestoneTask'], //项目状态
        approveNodeList: selectApproveNode, //审批节点设置集合
        notifyContent: notifyContent,
        requestDescribe: this.form1.desc
      };
			this.$store.dispatch('task/milestoneFinishApprove', params).then(res => {
        this.showSuccessMessage('提交审批成功');
        this.getApproveNode($conf.modelId['milestoneTask']);
        this.status = 'appliced';
			})
    },
    getProjectDetail() {
      let params = {
        id: this.query.projectId
      };
      this.$store.dispatch("project/getProjectDetail", params).then(res => {
        this.approveNode.forEach(item => {
          if(item.id == '1181452854646992891') {
            item.userList = [{
              name: res.managerName,
              id: res.managerId
            }]
          }
        })
      });
    }
	},
	mounted() {
    if(this.$route.query.status) {
      this.status = this.$route.query.status;
    } else if(this.$route.query.taskStatus == '5') {
      this.status = 'application'
      this.getProjectDetail();
    } else {
      this.status = 'appliced';
    }
    this.uploadType = $conf.uploadType['task'];
    this.bizType = $conf.bizType['milestoneTask'];
    this.getApproveNode($conf.modelId['milestoneTask']);
    this.getUploadFile(this.$route.query.id);
	}
};
</script> 
<style lang="less" scoped>
.box-card {
  margin-top: 20px;
}
.documentList {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.name {
  width: 50px;
  height: 40px;
}
.approveNode {
  width: 150px;
}
.status {
  width: 100px;
}
.commit {
	margin-top: 30px;
}
.download {
  color: #fff;
  text-decoration: none;
}
</style>